// 练习1：请将下面的代码用ES6的写法进行改写

// 接口:
//   学生选修课选择情况表：https://www.easy-mock.com/mock/5af58399b758743d3788f8bb/courses_selection/
//   选修课表：https://www.easy-mock.com/mock/5af58399b758743d3788f8bb/courses/
'use strict';

;
(function () {
    const API = {
        COURSES_SELECTION: 'https://www.easy-mock.com/mock/5af58399b758743d3788f8bb/courses_selection/',
        COURSES: 'https://www.easy-mock.com/mock/5af58399b758743d3788f8bb/courses/'
    };

    class Person {
        constructor(name, age) {
            this.name = name
            this.age = age
        }

        getName() {
            return this.name
        }

        getAge() {
            return this.age
        }
    }

    class Student extends Person {
        constructor(name, age, number, subject) {
            super(name, age)
            this.number = number
            this.subject = subject
        }

        getNumber() {
            return this.number
        }

        getSubject() {
            return this.subject
        }
    }

    class App {
        request(url) {
            return new Promise((resolve, reject) => {
                $.ajax({
                    url: url,
                    type: 'GET',
                    success(res) {
                        resolve(res)
                    },
                    error(err) {
                        reject(err)
                    }
                })
            })
        }

        createTemplate(data) {
            if (data instanceof Array) {
                return `<table>
                            <thead>
                                <tr>
                                    <th>学号</th>
                                    <th>姓名</th>
                                    <th>年龄</th>
                                    <th>所选课程</th>
                                </tr>
                            </thead>
                            <tbody>
                                ${data.map(item => `
                                    <tr>
                                        <td>${item.number}</td>
                                        <td>${item.name}</td>
                                        <td>${item.age}</td>
                                        <td>${item.subject}</td>
                                    </tr>
                                `)}
                            </tbody>
                        </table>
                       `
            } else {
                return ''
            }
        }

        async dataHandler() {
            const coursesSelection = await this.request(API.COURSES_SELECTION)
            const data1 = Object.assign([], coursesSelection.data)
            const result = []
            const courses = await this.request(API.COURSES)
            data1.map(item1 => {
                courses.data.map(item2 => {
                    if (Object.is(item1.subjectId, item2.number)) {
                        item1.subjectName = item2.name
                    }
                })
                return item1
            }).map(item1 => {
                result.push(new Student(item1.name, item1.age, item1.number, item1.subjectName))
            })

            $('#result').html(this.createTemplate(result))
        }

        init() {
            this.dataHandler()
        }
    }

    new App().init()
})();